<template>
  <div>
    <!-- 加载动画，使用 Element Plus 的 Loading 组件 -->
    <el-loading v-if="isLoading" class="loading-wrapper" spinner="el-icon-loading" background="rgba(255, 255, 255, 0.7)"></el-loading>
    <!-- 图片，使用 v-else 确保和加载动画互斥 -->
    <img v-else :src="imageUrl" @load="handleImageLoaded" @error="handleImageError" alt="示例图片" class="image-style">
  </div>
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const imageUrl = ref("https://bpic.588ku.com/element_origin_min_pic/22/05/12/859ec4f62c8baf1cd925a18b9dc794ce.jpg"); // 你的图片URL
    const isLoading = ref(true); // 初始状态为加载中
    // 图片加载完成的回调
    const handleImageLoaded = () => {
      isLoading.value = false;
    };
    // 图片加载失败的回调
    const handleImageError = () => {
      isLoading.value = false; // 隐藏加载动画，你可能需要处理错误情况
      // 这里可以添加一些错误处理的逻辑，比如显示错误信息或替换图片等
    };
    return {
      imageUrl,
      isLoading,
      handleImageLoaded,
      handleImageError
    };
  }
};
</script>

<style scoped>
.loading-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-style {
  width: 100%; /* 或具体宽度 */
  height: auto;
  display: block; /* 防止图片下方出现额外空间 */
}
</style>
